<!DOCTYPE html>
<meta charset="utf-8">

<title>mouseover mouseout</title>

<html>

<head>

    <script src="./js/jquery-1.11.3.min.js"></script>

    <style type="text/css" media="screen">
        .parent {
            width: 200px;
            height: 200px;
            background: black;
        }
        
        .child {
            width: 100px;
            height: 100px;
            background: pink;
        }
        
        .a1 {
            width: 40px;
            height: 40px;
            background: orange;
            display: none;
        }
    </style>

</head>

<body>

    <div class="parent">


        <div class="child"></div>


        <div class="a1"></div>

    </div>


    <script>
        $('.parent').on('mouseover', function(e) {

            $('.a1').show(1000);

        });

        $('.parent').on('mouseout', function(e) {

            $('.a1').css('display', 'none');

        });

        $('.child').on('mouseover', function(e) {

            e.stopPropagation();

            $('.a1').css('display', 'block');

            //这是保证动画体的末状态不变

        });

        $('.child').on('mouseout', function(e) {

            e.stopPropagation();

            //防止从粉色框移出到黑色框时再次触发其他事件

        })
    </script>

</body>

</html>